<template>
    <div id="Superhot">
        <div class="header">
            <div class="ret" @click="goBack()"></div>
            <img class="header-left" src="../../assets/zfc-img/左箭头.png" alt="左箭头">
            <span>健康美味兼得的布尔本</span>
            <img class="header-right" src="../../assets/zfc-img/断货王/分享图标.png" alt="分享图标">
        </div>
        <div class="urlImg">
            <img src="../../assets/img/美味的布尔本.png" alt="美味的布尔本">
        </div>
        <div class="yellow">
          <span> 日本著名糕点品牌Bourbon布尔本，成立于1924年，是日本零食十强之一。制作的曲奇和糕点系列，品质远胜于欧洲传统西点，做工研究、精致、高贵、时尚、健康是Bourbon一贯的严谨作风，其北日本系列礼盒更是夺得了销售冠军，相当受欢迎。</span>
        </div>
        <div class="back">
               <div class="imgBack">
                    <img src="../../assets/img/曲奇饼干.png" alt="曲奇饼干">
               </div>
               <div class="Cookies">最受欢迎曲奇礼盒系列</div>
               <div class="brief ">日本本土国内受欢迎的曲奇点心，浓浓的牛油味，饼干的酥脆和可可牛奶的美妙结合，咬下去，满满幸福感。礼盒装
有三种不同口味，一盒里约54枚，布尔本家产品，礼盒包装无论是送人还是留着自己下午茶，都非常合适。</div>
        </div>
        <div class="location">
            <div class="purchase" v-for="(item,index) in arr" v-bind:key="index">
                <img :src="item.urlimg" alt="礼盒系列">
                <p class="txt">{{item.text}}</p>
                <p class="price">{{item.price}}</p>
                <p class="btn">{{item.btn}}</p>
            </div>
        </div>
        
        <div class="back">
               <div class="imgBack">
                    <img src="../../assets/img/曲奇饼干.png" alt="曲奇饼干">
               </div>
               <div class="Cookies">最受欢迎曲奇礼盒系列</div>
               <div class="brief ">日本本土国内受欢迎的曲奇点心，浓浓的牛油味，饼干的酥脆和可可牛奶的美妙结合，咬下去，满满幸福感。礼盒装
有三种不同口味，一盒里约54枚，布尔本家产品，礼盒包装无论是送人还是留着自己下午茶，都非常合适。</div>
        </div>
        <div class="location">
            <div class="purchase" v-for="(item,index) in arr" v-bind:key="index">
                <img :src="item.urlimg" alt="礼盒系列">
                <p class="txt">{{item.text}}</p>
                <p class="price">{{item.price}}</p>
                <p class="btn">{{item.btn}}</p>
            </div>
        </div>
        <!-- 返回顶部 -->
        <div class="return" v-if="btnFlag" @click="backTop">
            <img  class="go-top" src="../../assets/img/返回顶部.png" >
        </div>
    </div>
</template>
<script>
export default {
    name:'Superhot',
    data() {
        return {
            btnFlag:false,
            arr:[
                {
                    urlimg:require('../../assets/img/礼盒系列.png'),
                    text:'BOURBON布尔本hello kitty黄油曲奇礼盒54枚',
                    price:'￥12.90',
                    btn:'立即购买',
                },
                 {
                    urlimg:require('../../assets/img/礼盒系列.png'),
                    text:'BOURBON布尔本hello kitty黄油曲奇礼盒54枚',
                    price:'￥12.90',
                    btn:'立即购买',
                },
                 {
                    urlimg:require('../../assets/img/礼盒系列.png'),
                    text:'BOURBON布尔本hello kitty黄油曲奇礼盒54枚',
                    price:'￥12.90',
                    btn:'立即购买',
                },
                 {
                    urlimg:require('../../assets/img/礼盒系列.png'),
                    text:'BOURBON布尔本hello kitty黄油曲奇礼盒54枚',
                    price:'￥12.90',
                    btn:'立即购买',
                }

            ]
        }
    },
    methods: {
         goBack() {
            window.history.back()
        },
         // 点击图片回到顶部方法，加计时器是为了过渡顺滑
        backTop () {
            let timer = setInterval(() => {
                let ispeed = Math.floor(-this.scrollTop / 5)
                document.documentElement.scrollTop = document.body.scrollTop = this.scrollTop + ispeed
                if (this.scrollTop === 0) {
                clearInterval(timer)
                }
            }, 16)
         },
         // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
        scrollToTop () {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            this.scrollTop = scrollTop
            if (this.scrollTop > 60) {
            this.btnFlag = true
            } else {
            this.btnFlag = false
            }
        },
    },
     // window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
        mounted () {
        window.addEventListener('scroll', this.scrollToTop)
        },
        destroyed () {
        window.removeEventListener('scroll', this.scrollToTop)
        },
}
</script>
<style scoped>
#Superhot{
    width: 100%;
    background-color: #fff;
    position: absolute;
    z-index: 111;
}
 .header{
      width: 100%;
      height: 0.96rem;
      line-height: 0.96rem;
      background-color: #e53e42;
      font-size: 0.36rem;
      color: #fff;
      position: relative;
  }
  .ret{
    width: 0.25rem;
    height: 0.4rem;
    position: absolute;
    left: 0.2rem;
    top: 0.35rem;
    z-index: 100;
}
  .header-left{
      width: 0.25rem;
      height: 0.4rem;
      position: absolute;
      left: 0.2rem;
      top: 0.3rem;
  }
  .header>span{
      margin-left: 1.7rem;
  }
  .header-right{
      width: 0.4rem;
      height: 0.4rem;
      position: absolute;
      left: 6.3rem;
      top: 0.25rem;
  }
  /* 内容 */
  .urlImg{
      width: 100%;
      height: 4rem;
  }
  .urlImg>img{
      width: 100%;
      height: 4rem;
  }
  .yellow{
      width: 100%-0.2rem;
      height: 2.4rem;
      background-color: #ffcd2c;
      font-size: 0.28rem;
      color: #4d4d4d;
      padding-top: 0.3rem;
      padding-left: 0.2rem;
  }
  .yellow span{
      width: 6.4rem;
      height: 1.7rem;
  }
  .back{
      width: 100%;
      height: 4.7rem;
      background-color: #f2f2f2;
      /* margin-top: 0.15rem; */
      position: relative;
  }
  .imgBack{
      width: 100%;
      height: 4.4rem;
      text-align: center;
      background-color: #fdf3f1;
  }
  .imgBack>img{
      width: 6.53rem;
      height: 4rem;
      margin-top: 0.2rem;
  }
  .Cookies{
      font-size: 0.3rem;
      position: absolute;
      top: 0.5rem;
      left: 2.8rem;
      color: #4e1f1d;
  }
  .brief {
      width: 3.8rem;
      height: 2rem;
      font-size: 0.24rem;
      position: absolute;
      top: 1rem;
      left: 2.8rem;
      color:#4d4d4d;
  }
  .location{
      width:100%;
      height: 8.9rem;
      background-color: #f2f2f2;
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;
      text-align: center;
  }
  .purchase{
      width: 3.3rem;
      height: 4.4rem;
      background-color: #fff;
      border: solid 0.01rem #ccc;
      margin-top: 0.1rem;
  }
  .purchase>img{
      width: 3.3rem;
      height: 2.6rem;
  }
 .txt{
     font-size: 0.24rem;
 }
 .price{
     font-size: 0.24rem;
     color: #e53e42;
 }
 .btn{
     width: 2.2rem;
     height: 0.3rem;
     font-size: 0.18rem;
     background-color: #e53e42;
     color: #fff;
     margin-left: 0.55rem;
     border-radius: 0.25rem;
 }
 /* 返回顶部 */
.return{
    width: 0.5rem;
    height: 0.5rem;
    position: fixed;
    left: 6.2rem;
    top: 10.8rem;
    background-color: #fff;
    border-radius: 0.25rem;
    border: solid 1px #ccc;
}
.return img{
    margin-bottom: 0.58rem;
}
</style>